<template>
  <div>
    <div class="talk-item">
      <div class="text" :style="{'backgroundColor':itemBg}">{{content}}</div>
      <div class="options">
        <div class="copy" @tap="setClipbordData()">复制</div>
        <div class="fav" @tap="setFavsData()">收藏</div>
        <div class="image" @tap="editorPoster()">选配图</div>
        <button class="share" open-type="share" plain="true">分享</button>
      </div>
    </div>
  </div>
</template>

<script>

  import {API} from "../api";
  import {showModal} from "../api/wechat";
  import {showToast} from "../utils";

  export default {
    name:"Card",
    props:{
      itemBg:{
        type: String,
        default(){
          return "#ccc";
        }
      },
      content:{
        type:String,
        default(){
          return "";
        }
      },
      itemId:{
        type:Number,
        default(){
          return 0;
        }
      }
    },
    onShareAppMessage(){
      return {
        title:'【卡片说说】总有一句说说戳中你的心坎。',
        imageUrl:"https://oss.ido.icu/images/share.png?x-oss-process=imgalias/thumb",
        path:"/pages/index/main"
      }
    },

    components: {
    },

    methods: {
      shareSS(){
        this.$emit('emitMethods',{'itemId':1111});
      },
      setFavsData(){
        let _this = this;
        API.setCountCopy({contentId:_this.itemId,type:'favs'}).then( res => {
          if(res.code == 200){
            showToast('已收藏',true);
          } else {
            console.log(res);
          }
        });
      },
      setClipbordData(){
        let _this = this;
        API.setCountCopy({contentId:_this.itemId,type:'copys'}).then( res => {
            if(res.code == 200){
              wx.setClipboardData({
                data:_this.content,
                success:function (res) {
                  showToast('已复制',true);
                }
              });
            } else {
              console.log(res);
            }
        });

      },
      editorPoster(){
        let _this = this;
        _this.$router.push({ path: '/pages/editor/main', query: { content: _this.content } });
      },
      selectPics(itemId){
        //this.$router.push({ path: '/pages/makex/main', query: { itemId: itemId } });
        this.$router.push({ path: '/pages/pics/main', query: { itemId: itemId } });
      }
    },

    created () {
      // let app = getApp()
    }
  }
</script>

<style scoped>
  .talk-item{
    width: 95%;
    margin: 10px auto;
    border-radius: 7px;
    background-color: #fff;
    box-sizing: border-box;
    box-shadow:1px 1px 3px #ccc;
  }
  .talk-item .text{
    padding: 25px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    color: #141414;
    font-size: 15px;
    min-height: 60px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
  }
  .talk-item .options{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    padding: 5px;
    background-color: #f5f5f5;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
  }
  .talk-item .options .copy{
    background:url("") no-repeat left center;
    padding-left: 17px;
    background-size: 15px;
  }
  .talk-item .options .fav{
    background:url("") no-repeat left center;
    padding-left: 17px;
    background-size: 15px;
  }
  .talk-item .options .image{
    background:url("") no-repeat left center;
    padding-left: 17px;
    background-size: 15px;
  }
  .talk-item .options .share{
    background:url("") no-repeat left center;
    padding-left: 17px;
    background-size: 12px;
    border: 0;
    color: #000;
  }

  .item-bg-two{
    background-color: #FF8C00;
    height: 100%;
    background-size: cover;
  }
  .item-bg-three{
    background-color: #FFE4B5;
    height: 100%;
    background-size: cover;
  }
  .item-bg-four{
    background-color: #EE82EE;
    height: 100%;
    background-size: cover;
  }


</style>
